<template>
	<view>
		<navbar :parameter='parameter'></navbar>
		<view class="list-box" style="z-index: 10;background-color: #fff;">
			<view class="search-box acea-row row-middle" hover-class="none">
				<text class="iconfont icon-sousuo1"></text>
				<input type="text" v-model="search_value" confirm-type="search" @input="search" @confirm="search"
					placeholder="请输入搜索关键词">
			</view>
		</view>
		<view class="tab-box " style="z-index: 10;background-color: #fff;">
			<view class="acea-row row-between-wrapper">
				<block v-for="(item,index) in select_list" :key="index">
					<view class="tab-item" :class="selectIndex == index? 'active':''" @tap.stop="select(item,index)">
						<text class="tit"> {{item.rank_name}} </text> <text class="iconfont icon-xiala1"></text>
					</view>
				</block>
				<!-- 	<view class='tab-item' @click='set_where(1)'>
					累计服务
					<image v-if="order == 1" src='/static/images/up.png'></image>
					<image v-else-if="order == 2" src='/static/images/down.png'></image>
					<image v-else src='/static/images/horn.png'></image>
				</view>
				<view class='tab-item' @click='set_where(2)'>
					综合评价
					<image v-if="order == 3" src='/static/images/up.png'></image>
					<image v-else-if="order == 4" src='/static/images/down.png'></image>
					<image v-else src='/static/images/horn.png'></image>
				</view> -->
			</view>
			<!-- 		<scroll-view scroll-y="true" class="select-list" v-if="show">
				<block v-for="(item,index) in select_list" :key="index">
					<view class="select-item acea-row row-between-wrapper" :class="selectIndex == index? 'active':''"
						@tap.stop="select(item,index)">
						<text class="tit"> {{item.rank_name}} </text>
						<u-icon name="checkbox-mark" color="#347dfe" size="20" v-if="selectIndex == index">
						</u-icon>
					</view>
				</block>
			</scroll-view> -->
		</view>
		<view class="list-box">
			<block v-for="(item,index) in rankList" :key="index">
				<navigator class="list-item acea-row" :url="'/pages/index/attendant_details?id='+item.id">
					<image :src="imageUrl+item.head_image" mode="aspectFill"></image>
					<view class="cont-box">
						<view class="line acea-row row-between-wrapper">
							<view> {{identityName}}：<text>{{item.staff_name}}</text></view>
							<view> 累计服务：<text>{{item.order_viture_num}}单</text></view>
						</view>
						<view class="line acea-row row-middle">
							综合评分：<u-rate :value="item.comprehensive_score" readonly activeColor="#FFA731"
								inactiveColor="#EDEDEC">
							</u-rate> <text class="score">{{item.comprehensive_score}}</text>
						</view>
						<view class="line line1">
							客户评价： <text>{{item.evaluate}}</text>
						</view>
						<view class="btn acea-row row-center-wrapper">我要选TA</view>
					</view>
				</navigator>
			</block>
		</view>
		<!-- <u-overlay :show="show" @click="show = false" zIndex="9"></u-overlay> -->	
		<u-loadmore :status="status" line dashed @loadmore="loadmore"  v-if="rankList.length > 0"/>
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无陪诊师" v-else></u-empty>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '陪诊师排行榜',
					'color': false,
				},
				identityName:'陪诊师',
				imageUrl: this.imageUrl,
				// select_name: '全部',
				select_list: [],
				// show: false,
				selectIndex:0,
				rank_id: '',
				order: '',
				search_value: '',
				rankList: [],
				area_id: app.globalData.area_id,
				// 加载更多
				status: 'loadmore',
				limit: 10,
				page: 1,
				total_num: '',
			};
		},
		onLoad() {
			if(uni.getStorageSync('identity') == 1){
				this.parameter.title = '陪诊师排行榜'
			}else{
				this.parameter.title = '陪护师排行榜';
				this.identityName = '陪护师'
			}
			this.lists(1);
			this.staffRanks();
		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
		
		},
		onShareTimeline(res) { //分享到朋友圈
		
		},
		onReachBottom() {
			this.loadmore()
		},
		methods: {
			async staffRanks() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/staff/staffRanks',
				})
				var arr1 = [{
					id: "",
					rank_name: '全部'
				}];
				var arr2 = res.data.data;
				arr1.push(...arr2);
				this.select_list = arr1;
			},
			async lists(page) {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/staff/lists',
					data: {
						hospital_id: uni.getStorageSync('hospital_id'),
						page: page,
						limit: 10,
						rank_id: that.rank_id,
						area_id: that.area_id,
						order: that.order,
						search: that.search_value
					}
				})
				this.rankList = [...this.rankList, ...res.data.data];
				this.total_num = res.data.total_num;
			},
			// select_show(index) {
			// 	this.show = !this.show;
			// },
			select(item, index) {
				console.log(item)
				this.selectIndex = index;
				this.rank_id = item.id;
				// this.show = false;
				// this.select_name = item.rank_name;
				this.rankList = [];
				this.lists();
			},
			search() {
				this.page = 1;
				this.rankList = [];
				this.lists(1);
			},
			// set_where(id) {
			// 	switch (id) {
			// 		case (1):
			// 			if (this.order == '')
			// 				this.order = 1;
			// 			else if (this.order == 1)
			// 				this.order = 2;
			// 			else if (this.order == 2)
			// 				this.order = '';
			// 			console.log(this.order)
			// 			break
			// 		case (2):
			// 			if (this.order == '')
			// 				this.order = 3;
			// 			else if (this.order == 3)
			// 				this.order = 4;
			// 			else if (this.order == 4)
			// 				this.order = '';
			// 			break
			// 	}
			// 	this.rankList = [];
			// 	this.lists();
			// },

			loadmore() {
				console.log(11111)
				if (this.total_num == this.rankList.length) {
					this.status = 'nomore';
				} else {
					this.status = 'loading';
					this.page++;
					this.lists(this.page);
				}
				setTimeout(() => {
					if (this.total_num == this.rankList.length) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff !important;
	}
</style>
<style lang="scss" scoped>
	.list-box {
		padding: 0 30rpx;
		position: relative;
	}

	.search-box {
		width: 100%;
		height: 70rpx;
		border-radius: 14rpx;
		border: 1px solid #DEDEDE;
		color: rgba(153, 153, 153, 0.502);
		padding: 0 30rpx;
		font-size: 24rpx;
	}

	.search-box .iconfont {
		font-size: 42rpx;
		margin-right: 30rpx;
	}

	.search-box input {
		color: #333;
	}

	.tab-box {
		padding: 30rpx;
		height: 100rpx;
		position: relative;
	}

	.tab-box .tab-item {
		width: 33.3%;
		text-align: center;
	}


	.tab-box .tab-item image {
		width: 15rpx;
		height: 19rpx;
		margin-left: 10rpx;
	}

	.tab-box .tab-item.active {
		color: #347dfe;
	}

	.tab-box .tab-item.active .tit {
		font-size: 30rpx;
	}

	// .select-list {
	// 	position: absolute;
	// 	width: 100%;
	// 	left: 0;
	// 	top: 100rpx;
	// 	background-color: #fff;
	// 	padding: 0 30rpx;
	// 	height: 460rpx;
	// 	z-index: 10;

	// }

	// .select-list .select-item {
	// 	height: 90rpx;
	// 	border-bottom: 1px solid #F4F4F4;

	// }

	// .select-list .select-item.active {
	// 	color: #347dfe;
	// }



	.list-item {
		margin-bottom: 40rpx;
	}

	.list-item image {
		width: 30%;
		height: 218rpx;
	}

	.list-item .cont-box {
		width: 70%;
		padding-left: 20rpx;
		font-size: 26rpx;
	}

	.list-item .cont-box .line {
		padding-bottom: 16rpx;
		color: #525252;
	}

	.list-item .cont-box .line text {
		color: #020006;
	}

	.list-item .cont-box .line .score {
		color: #347dfe;
		padding-left: 10rpx;
		margin-top: 4rpx;
	}

	.list-item .cont-box .btn {
		width: 160rpx;
		height: 50rpx;
		color: #fff;
		background-color: #347DFE;
		border-radius: 40rpx;
		font-size: 24rpx;
		margin-top: 6rpx;
	}
</style>
